<template>
<div class="user pb50" v-loading="loading">
    <div class="product-content">
      <!--售后单信息-->
      <div class="common-form">{{$t('order.after_sale_order_info')}}</div>
      <div class="refund-detail-content">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.order_number_label')}}</span> {{detail.order.orderNo}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.buyer_label')}}</span> {{detail.user.nickName}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.after_sale_type_label')}}</span> {{detail.typeText}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.processing_status_label')}}</span> {{detail.statusText}}

            </div>
          </el-col>
          <el-col :span="4">
            <div class="pb16">
              <el-button size="mini" href="/" target="_blank" @click="gotoPage(detail)">{{$t('order.order_details')}}</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--售后单信息-->
      <div class="common-form">{{$t('order.merchant_info')}}</div>
      <div class="refund-detail-content">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.merchant_name_label')}}</span> {{order.supplierName}}

            </div>
          </el-col>
        </el-row>
      </div>
      <!--售后商品信息-->
      <div class="common-form">{{$t('order.after_sale_product_info')}}</div>
      <div class="refund-detail-content">
        <el-row>
          <el-col :span="5">
            <div class="pb16"><span class="gray9">{{$t('order.product_code_label')}}</span></div>
          </el-col>
          <el-col :span="19">
            <div class="pb16">
              <span class="gray9">{{$t('order.product_name_label')}}</span> {{detail.orderProduct.productName}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.product_weight')}}</span> {{detail.orderProduct.productWeight}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.unit_price')}}</span> {{detail.orderProduct.linePrice}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.purchase_quantity')}}</span> {{detail.orderProduct.totalNum}}

            </div>
          </el-col>
          <el-col :span="5" v-if="detail.order.orderSource == 80">
            <div class="pb16">
              <span class="gray9">{{$t('order.payment_price')}}</span> {{(detail.order.payPrice * 1).toFixed(2)}}

            </div>
          </el-col>
          <el-col :span="5" v-else>
            <div class="pb16">
              <span class="gray9">{{$t('order.payment_price')}}</span> {{detail.orderProduct.totalPayPrice}}

            </div>
          </el-col>
        </el-row>
      </div>

      <!--用户申请原因-->
      <div class="apply-reason-box">
        <div class="common-form">{{$t('order.user_reason')}}</div>
        <div class="apply-reason">{{detail.applyDesc}}</div>
        <div class="d-s-s mt10" v-if="detail.images && detail.images.length > 0">
          <div class="pic" v-for="(item, index) in detail.images" :key="index">
            <img v-img-url="item.filePath" alt="" width="60" />
          </div>
        </div>
      </div>

      <!-- 退货地址 -->
      <div v-if="detail.isAgree == 10 && detail.type != 30">
        <div class="common-form mt16">{{$t('order.return_address')}}</div>
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.receiver_name_label')}}</span> {{detail.address.name}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.receiver_phone_label')}}</span> {{detail.address.phone}}

            </div>
          </el-col>
          <el-col :span="14">
            <div class="pb16">
              <span class="gray9">{{$t('order.receiver_address_label')}}</span> {{detail.address.detail}}

            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 商家拒绝原因 -->
      <div v-if="detail.isAgree == 20">
        <div class="common-form">{{$t('order.merchant_reject_reason')}}</div>
        <div class="apply-reason">{{detail.refuseDesc}}</div>
      </div>
      <!-- 平台拒绝原因 -->
      <div v-if="detail.plateStatus == 30">
        <div class="common-form">{{$t('order.platform_reject_reason')}}</div>
        <div class="apply-reason">{{detail.plateDesc}}</div>
      </div>
      <!-- 用户发货信息 -->
      <div v-if="detail.type != 30 && detail.isAgree == 10 && detail.isUserSend == 1"

>
        <div class="common-form mt16">{{$t('order.user_shipping_info')}}</div>
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.logistics_company_label')}}</span> {{detail.express.expressName}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.logistics_number_label')}}</span> {{detail.expressNo}}

            </div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.user_shipping_status')}}</span> {{$t('order.shipped0')}} 

</div>
          </el-col>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.shipping_time_label')}}</span> {{detail.sendTime}}

            </div>
          </el-col>
          <el-col :span="4">
            <div class="pb16">
              <span class="gray9">{{$t('order.merchant_receipt_status')}}</span>
              <template v-if="detail.isReceipt == 1"> {{$t('order.merchant_received')}} </template>
              <template v-else=""> {{$t('order.merchant_pending_receipt')}} </template>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--售后单信息-->
      <div class="common-form">{{$t('order.merchant_review')}}</div>
      <div class="refund-detail-content">
        <el-row>
          <el-col :span="5">
            <div class="pb16">
              <span class="gray9">{{$t('order.review_status')}}</span> {{detail.statusText}}

            </div>
          </el-col>
          <el-col :span="5" v-if="detail.isAgree == 10 && detail.refundMoney > 0">
            <div class="pb16">
              <span class="gray9">{{$t('order.refund_amount_label')}}</span> {{detail.refundMoney}}

            </div>
          </el-col>
        </el-row>
      </div>
      <!--商家审核-->
      <div v-if="detail.plateStatus == 10">
        <div class="common-form mt16">{{$t('order.platform_review')}}</div>
        <el-form size="small" ref="form" :model="form" label-width="80px">
          <el-form-item :label="$t('order.after_sale_type')">
            <span class="orange">{{detail.typeText}}</span>
          </el-form-item>
          <el-form-item :label="$t('order.review_status0')">
            <el-radio-group v-model="form.isAgree">
              <el-radio :label="10">{{$t('order.direct_refund')}}</el-radio>
              <el-radio :label="20">{{$t('order.reject_after_sale')}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('order.refund_amount')">
            <el-input v-model="form.refundMoney"></el-input>
            <p> {{$t('order.refund_input_note',{place1:detail.orderProduct.totalPayPrice})}} 





</p>
          </el-form-item>
          <el-form-item :label="$t('order.reject_reason')" v-if="form.isAgree == 20"><el-input type="textarea" v-model="form.plateDesc"
              class="max-w460"></el-input></el-form-item>
        </el-form>
      </div>
      <div v-if="detail.type == 20 && detail.isAgree.value == 10 && detail.isUserSend == 1">
        <div v-if="detail.isPlateSend == 1">
          <div class="common-form mt16">{{$t('order.platform_shipping_info')}}</div>
          <el-row>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.logistics_company_label')}}</span> {{detail.sendexpress.expressName}}

              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.logistics_number_label')}}</span> {{detail.sendExpressNo}}

              </div>
            </el-col>
            <el-col :span="5">
              <div class="pb16">
                <span class="gray9">{{$t('order.shipping_time_label')}}</span> {{detail.deliverTime}}

              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc">{{$t('order.cancel_or_back')}}</el-button>
      <!--商家审核-->
      <template v-if="detail.plateStatus == 10">
        <el-button size="small" type="primary" @click="onSubmit(detail.orderRefundId)">{{$t('order.confirm_review')}}</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import OrderApi from "@/api/order.js";
export default {
  data() {
    return {
      tableData: {},
      /*退货详情*/
      detail: {
        isAgree: {},
        type: {},
        status: {},
        order: {},
        user: {},
        orderProduct: {},
        express: {},
        address: {},
        image: [],
        is_plate_send: 0,
        sendexpress: {}
      },
      /*订单详情*/
      order: {},
      /*退货地址列表*/
      address: {},
      form: {
        isAgree: 10,
        addressId: 0,
        plateDesc: "",
        refundMoney: 0
      },
      money: {
        refundMoney: 0
      },
      orderRefundId: 0,
      loading: true
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*获取列表*/

    getData() {
      let self = this;
      let orderRefundId = this.$route.query.orderRefundId;
      OrderApi.refundplateDetail({
        orderRefundId: orderRefundId
      }, true).then(res => {
        self.detail = res.data;
        self.order = res.data.order;
        self.addressList = res.data.addressList;
        self.expressList = res.data.expressList;
        self.loading = false;
      }).catch(error => {});
    },
    /*跳转订单详情*/
    gotoPage(row) {
      let self = this;
      this.$router.push({
        path: "/order/order/detail",
        query: {
          orderId: row.orderId
        }
      });
    },
    /*审核*/
    onSubmit(e) {
      let self = this;
      let form = self.form;
      let orderRefundId = e;
      OrderApi.plateApproval({
        isAgree: form.isAgree,
        addressId: form.addressId,
        plateDesc: form.plateDesc,
        orderRefundId: orderRefundId,
        refundMoney: form.refundMoney
      }, true).then(data => {
        ElMessage({
          message: $t("order.operation_success"),
          type: "success"
        });
        this.getData();
      }).catch(error => {});
    },
    /*确认收货退款*/
    refundMoney(e) {
      let self = this;
      let form = self.money;
      OrderApi.receipt({
        refundMoney: form.refundMoney,
        orderRefundId: e
      }, true).then(data => {
        ElMessage({
          message: $t("order.operation_success"),
          type: "success"
        });
        this.getData();
      }).catch(error => {});
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>

<style>
.apply-reason {
  padding: 16px;
  background: #fff4f4;
  border: 1px solid #f6e6e6;
}

.apply-reason-box .pic {
  width: 100px;
  height: 100px;
  margin-right: 4px;
  border: 1px solid #d1d5dd;
}

.apply-reason-box .pic img {
  width: 98px;
  height: 98px;
  object-fit: contain;
}
</style>

